<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <style>
        * { /*样式的重置*/
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #root {
            width: 1000px;
            min-height: 650px;
            margin: 0 auto; /*水平居中*/
            /*background: black;*/
            position: relative;
        }

        #head {
            width: 100%;
            height: 100px;
            /*background: red;*/
        }

        #left {
            width: 422px;
            /*background: darkgreen;*/
        }

        #right {
            width: 585px;
            /*background: deepskyblue;*/
            right: 0;
        }

        #foot {
            width: 100%;
            height: 100px;
            /*background: purple;*/
            padding: 30px;
            bottom: 0;
        }

        .layout-box {
            position: absolute;
        }

        .mid {
            height: 450px;
            top: 100px;
        }

        #top-bar {
            width: 100%;
        }

        #top-bar li {
            float: left;
            width: 20%;
            height: 30px;
            background: #ccc;
            text-align: center; /*字体水平居中*/
        }

        #top-bar li > a {

            line-height: 30px;
            text-decoration: none;
            color: black;
        }

        #bottom-bar {
            width: 100%;
        }

        #bottom-bar li {
            float: left;
            width: 33%;
            height: 30px;
            text-align: center;
            background: #ccc;
        }

        #bottom-bar li > a {
            text-decoration: none;
            color: black;
            line-height: 30px;
        }

        #wangzhi {
            font-family: 华文楷体;
            color: orangered;
            font-size: 30px;
        }

        #price {
            color: red;
            font-size: 35px;
            font-weight: bold;
        }

        #chicun {
            height: 60px;
            font-family: 黑体;
            font-size: 30px;
        }

        #data {
            height: 100px;
            padding: 10px;
            font-family: 华文楷体;
            font-size: 25px;
        }

        .left-distance {
            margin: 10px;
        }

        #pic1 > img {
            width: 745px;
            height: 360px;
            margin: 30px;
        }

        #pic2 > img {
            width: 745px;
            height: 360px;
            margin: 10px;

    </style>
</head>
<body>
<div id="root">
    <div id="head" class="layout-box">
        <ul id="top-bar"><!--顶部导航-->
            <li><a href="#">首页</a></li>
            <li><a href="#">我的淘宝</a></li>
            <li><a href="#">购物车</a></li>
            <li><a href="#">商品分类</a></li>
            <li><a href="#">收藏夹</a></li>
        </ul>
        <div id="logo">
            <h1>淘宝网</h1>
            <span id="wangzhi">TaoBao.com</span>

        </div>

    </div><!--页首结束-->


    <div id="left" class="layout-box mid">
        <ul id="picture">
            <li><img src="TB2PA3hXNSYBuNjSsphXXbGvVXa_!!2157671476.jpg" alt=""></li>
        </ul>
    </div><!--左边栏结束-->


    <div id="right" class="layout-box mid">
        <div id="chicun" class="left-distance"><span>vivi V9手机全网通4G双面曲屏无边框超薄5.5寸大屏指纹解锁智能机</span></div>
        <div id="data" class="left-distance">
            <span>正品，5.5屏，指纹解锁识别，全网通4G，前后双摄，支持7天退货 默认申通包邮</span>
        </div>
        <div id="price" class="left-distance"><span>淘宝价：只要998元！</span></div>
    </div><!--右边栏结束-->
    <div id="foot" class="layout-box">

        <ul id="bottom-bar"><!--底部导航栏-->
            <li><a href="#">宝贝详情</a></li>
            <li><a href="#">累计评价</a></li>
            <li><a href="#">专项服务</a></li>
        </ul>
        <ul id="pic1"><img src="TB2STQmXGmWBuNjy1XaXXXCbXXa_!!2157671476.jpg" alt=""></ul>
        <ul id="pic2"><img src="TB2KpB8X_JYBeNjy1zeXXahzVXa_!!2157671476.jpg" alt=""></ul>
    </div><!--页脚结束-->
</div><!--根元素结束-->
</body>
</html>